<template>
	<view>
		<scroll-view class="zq-subfield"
			:scroll-x="true"
			:show-scrollbar="false"
			:scroll-with-animation="true"
			:scroll-into-view="'zq-nav-' + navIndex"
			:style="{
				'position':settings.position,
				'height':settings.height + 'rpx',
				'width':settings.width + 'rpx',
				'background':settings.background,
				'zIndex':settings.zIndex,
				'top':settings.top + 'rpx',
				'left':settings.left + 'rpx',
				'borderBottom':settings.borderBottom
			}"
		>
			<view class="zq-subfield-list" :style="{'height':settings.height - settings.sliderHeight + 'rpx'}">
				<block v-for="(item,index) in navList">
					<view 
						class="zq-subfield-item"
						:id="'zq-nav-' + index"
						:style="{
							'fontSize':(index == navIndex ? settings.activeFontSize : settings.fontSize) + 'rpx',
							'color':index == navIndex ? settings.activeColor : settings.color,
							'paddingLeft':(index == 0 ? settings.padding : settings.padding / 2) + 'rpx',
							'paddingRight':(index == navList.length - 1 ? settings.padding : settings.padding / 2) + 'rpx',
							'lineHeight':settings.height - settings.sliderHeight + 'rpx'
						}"
						@click="selNav(index)"
					>
						{{item.name}}
						<text 
							class="zq-subfield-item-dot"
							:style="{
								'right':(item.dotRight || (settings.padding / 2 - settings.dotRadius * 2 + 12)) + 'rpx',
								'top':(item.dotTop || (settings.height - settings.fontSize) / 2 - settings.dotRadius * 2 + 8) + 'rpx',
								'width': settings.dotRadius * 2 + 'rpx',
								'height': settings.dotRadius * 2 + 'rpx',
								'borderRadius':settings.dotRadius + 'rpx',
								'lineHeight':settings.dotRadius * 2 + 'rpx',
								'fontSize':settings.dotFontSize + 'rpx',
								'color':settings.dotColor,
								'background':settings.dotBackground
							}"
							v-if="item.dotText">
						{{item.dotText}}</text>
						<image
							class="zq-subfield-item-dot-img"
							:src="item.dotIamge" 
							v-if="item.dotIamge"
							mode="aspectFill"
							:style="{
								'width':(item.dotIamgeWidth || settings.dotRadius * 2) + 'rpx',
								'height':(item.dotIamgeHeight || settings.dotRadius * 2) + 'rpx',
								'right':(item.dotRight || (settings.padding / 2 - settings.dotRadius * 2 + 12)) + 'rpx',
								'top':(item.dotTop || (settings.height - settings.fontSize) / 2 - settings.dotRadius * 2 + 8) + 'rpx',
							}"
						></image>
					</view>
				</block>
			</view>
			<view class="zq-subfield-order" 
				:style="{
					'width':settings.sliderWidth + 'rpx',
					'height':settings.sliderHeight + 'rpx',
					'marginLeft': (navIndex == -1 ? -settings.sliderWidth : navList[navIndex].sliderLeft) + 'rpx',
					'background':settings.sliderBackground
				}"
			></view>
		</scroll-view>
		
		<view 
			class="zq-subfield-block" 
			:style="{
				'height':settings.height + 'rpx',
				'width':settings.width + 'rpx'
			}"
			v-if="settings.position == 'absolute' || settings.position == 'fixed'"
		></view>
	</view>
</template>

<script>
	export default{
		props:{
			value:{
				default:-1,
				type:[String,Number]
			},
			list:{
				default:[],
				type:Array
			},
			props:{
				default:null,
				type:Object
			}
		},
		watch:{
			value(nVal){
				this.navIndex = nVal;
			},
			list(nVal){
				this.dealList();
			},
			props(nVal){
				this.settings = Object.assign(this.settings,nVal);
			}
		},
		data(){
			return{
				navList:[],
				navIndex:-1,//分栏序号
				scale:0,//比例
				settings:{
					background:"#FFFFFF",//分栏背景色
					position:"",//分栏定位
					borderBottom:"2rpx solid #F8F8F8",//底部边框
					width:750,//分栏宽度
					height:100,//分栏高度
					top:0,//顶部边距
					left:0,//左边距
					zIndex:999,//层级
					fontSize:24,//分栏文字大小rpx
					color:"#333333",//分栏文字颜色
					activeColor:"#FA8743",//激活文字颜色
					activeFontSize:30,//激活文字大小
					padding:60,//分栏文字间距
					
					sliderWidth:60,//滑块宽度
					sliderHeight:4,//滑块高度
					sliderBackground:"linear-gradient(to right,#FA8743,#FA8743)",//滑块背景色
					
					dotFontSize:18,//数字提示字号大小
					dotBackground:"#DD524D",//数字提示背景颜色
					dotColor:"#ffffff",//数字提示文字的颜色
					dotRadius:20//数字提示背景半径
				}
			}
		},
		mounted() {
			this.settings = Object.assign(this.settings,this.$store && this.$store.state.zqSubfieldSetting ? this.$store.state.zqSubfieldSetting : {},this.props);
			this.dealList();
		},
		created(){
			uni.getSystemInfo({
				success: (event) => {
					this.scale = 750 / event.screenWidth;
				}
			})
		},
		methods:{
			dealList(){//处理数组
				this.navList = this.list;
				setTimeout(()=>{
					let query = uni.createSelectorQuery().in(this);
					query.selectAll(".zq-subfield-item").boundingClientRect(data => {
						this.navList = data.map((obj,index) =>{
							obj.sliderLeft = (obj.width * this.scale - this.settings.sliderWidth) / 2 + obj.left * this.scale;
							if(index == 0)obj.sliderLeft += (this.settings.padding / 4)
							if(index == this.navList.length - 1)obj.sliderLeft -= (this.settings.padding / 4)
							obj = Object.assign(obj,this.list[index]);
							return obj
						})
						setTimeout(()=>{
							this.selNav(this.value);
						},100)
					}).exec();
				},20)
			},
			selNav(index){//选择分类
				if(index == -1){
					this.navIndex = 0
				}else{
					this.navIndex = index;
				}
				this.navIndex = index;
				this.$emit("input",this.navIndex);
				this.$emit("change",this.navIndex,this.navList[this.navIndex]);
			},
		}
	}
</script>

<style scoped lang="scss">
	.zq-subfield-list{display: flex;flex-direction: row;align-items: center;}
	.zq-subfield-item{position: relative; flex-shrink: 0;transition: all 0.3s;}
	.zq-subfield-item-dot{position: absolute;text-align: center;box-shadow: 0 0 10rpx rgba(0,0,0,0.3);z-index: 2;}
	.zq-subfield-item-dot-img{position: absolute;box-shadow: 0 0 10rpx rgba(0,0,0,0.3);z-index: 2;border-radius: 100rpx;}
	
	.zq-subfield-order{border-radius:10rpx;transition: all 0.3s;}
</style>
